<template>
  <view class="container">
    <scroll-view class="scroll-view" scroll-y>
      <!-- 顶部轮播图 -->
      <swiper class="swiper" indicator-dots autoplay circular>
        <swiper-item v-for="(item, index) in school.images" :key="index">
          <image class="swiper-image" :src="item" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
      
      <!-- 基本信息 -->
      <view class="base-info">
        <view class="info-header">
          <text class="name">{{school.school_name}}</text>
          <view class="actions">
            <uni-icons type="star" size="24" :color="isFavorited ? '#f60' : '#ccc'" @click="toggleFavorite"></uni-icons>
            <uni-icons type="share" size="24" color="#999" @click="share"></uni-icons>
          </view>
        </view>
        <view class="info-stats">
          <view class="stat-item">
            <text class="stat-value">{{school.passRate}}%</text>
            <text class="stat-label">通过率</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{school.students || 3500}}+</text>
            <text class="stat-label">学员</text>
          </view>
         <view class="stat-item">
            <text class="stat-value">{{school.rating}}</text>
            <text class="stat-label">评分</text>
          </view>
        </view>
        <view class="info-price" v-if="false">
          <text class="price">¥{{school.price}}</text>
          <text class="original-price">¥{{school.yprice}}</text>
        </view>
        <view class="info-tags">
          <text class="tag" v-for="(tag, index) in school.tags" :key="index">{{tag}}</text>
        </view>
      </view>
      
      <!-- 驾校介绍 -->
      <view class="section">
        <view class="section-title">驾校介绍</view>
        <view class="section-content">{{school.description}}</view>
		<view class="section-content">地址：{{school.address}}</view>
      </view>
      
      <!-- 教练团队 -->
      <view class="section">
        <view class="section-title">教练团队</view>
        <scroll-view class="coach-scroll" scroll-x>
          <view class="coach-item" v-for="(coach, index) in coaches" :key="index">
			<image style="border: 1rpx solid #d1d1d1;" class="coach-avatar" :src="coach.avatar"></image>
            <text class="coach-name">{{coach.name}}</text>
			<view class="coach-name" style="margin: 10rpx 0;">教龄：{{coach.teaching_years}}年</view>
            <view class="coach-rating">
              <uni-rate :value="coach.rating" size="12" readonly></uni-rate>
              <text class="rating-text">{{coach.rating||0}}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      
      <!-- 报名套餐 -->
      <view class="section">
        <view class="section-title">报名套餐</view>
		<u-tabs :list="list1" @click="clickTabs"></u-tabs>
		<view style="margin-bottom: 20rpx;"></view>
        <view class="package-list" v-if="dsPackageList.length>0">
          <view  class="package-item" v-for="(pkg, index) in dsPackageList" :key="index" 
                :class="{active: currentPackage === index}" @click="currentPackage = index">
            <text class="package-name">{{pkg.name}}</text>
            <text class="package-price">¥{{pkg.price}}</text>
            <text class="package-desc">{{pkg.description}}</text>
			<text class="package-desc" v-for="(item,index) in JSON.parse(pkg.features)" :key="index">{{item}}</text>
          </view>
		  
        </view>
		<view v-else style="height: 300rpx; text-align: center;line-height: 300rpx;color: #666;font-size: 26rpx;">
			暂无套餐数据 ~
		</view>
      </view>
      
      <!-- 学员评价 -->
      <!-- <view class="section">
        <view class="section-title">学员评价</view>
        <view class="review-item" v-for="(review, index) in school.reviews" :key="index">
          <view class="review-header">
			<u-avatar size="30"  class="review-avatar" :src="review.avatar"></u-avatar>
            <view class="review-user">
              <text class="review-name">{{review.name}}</text>
              <view class="review-rating">
                <uni-rate :value="review.rating" size="12" readonly></uni-rate>
                <text class="review-time">{{review.time}}</text>
              </view>
            </view>
          </view>
          <view class="review-content">{{review.content}}</view>
        </view>
        <view class="view-more" @click="viewAllReviews">查看全部评价 ></view>
      </view> -->
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="footer">
      <view class="footer-buttons">
        <button class="button contact" @click="contact">联系客服</button>
        <button class="button enroll" @click="enroll">立即报名</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false,
      currentPackage: 0,
	  coaches: [],
	  dsPackageList:[],
      school: {},
	  list1: [{name:'C1'},{name:'C2'}],
	  reviews: [
	    {
	      name: '小明同学',
	      avatar: '/static/avatar/1.jpg',
	      rating: 5,
	      time: '2023-05-10',
	      content: '教练非常耐心，教学很专业，一次就通过了所有考试！'
	    },
	    {
	      name: '小红同学',
	      avatar: '/static/avatar/2.jpg',
	      rating: 4,
	      time: '2023-04-15',
	      content: '整体还不错，就是周末练车的人有点多，需要提前预约。'
	    }
	  ],
	  ids:'',
	  car_type:'C1'
    }
  },
  onLoad(option) {
	  console.log('dasdadada',option)
	this.ids = option.id
  	this.getDetail(option.id)
	this.getdscoach(option.id)
	this.getdspackage()
  },
  methods: {
	clickTabs(E){
		console.log('eeee',E)
		this.car_type = E.name
		this.getdspackage()
	},
	async getDetail(id){
		const res = await this.$api.get(`/DrivingSchool/get`,{id:id},true)
		if(res.data.code === 200) {
			this.school = res.data.data
		}
	},
	async getdscoach(id){
		const res = await this.$api.get(`/Coach/list`,{school_id:id},true)
		if(res.data.code === 200) {
			this.coaches = res.data.data.list
		}
	},
	//价格套餐表
	async getdspackage(){
		const res = await this.$api.get('/Package/index',{school_id:this.ids,car_type:this.car_type},true)
		if(res.data.code === 200) {
			this.dsPackageList = res.data.data.list
		}
	},
    toggleFavorite() {
      this.isFavorited = !this.isFavorited
      uni.showToast({
        title: this.isFavorited ? '已收藏' : '已取消',
        icon: 'none'
      })
    },
    share() {
      uni.showActionSheet({
        itemList: ['分享给好友', '分享到朋友圈'],
        success: (res) => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        }
      })
    },
    contact() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      })
    },
    async enroll() {
	 uni.navigateTo({
		url: `/pagesA/confirm?id=${this.school.school_id}&name=${this.school.school_name}`
	})
      
    },
    viewAllReviews() {
      uni.navigateTo({
        url: `/pages/driving-school/feedback?id=${this.school.id}`
      })
    }
  }
}
</script>

<style>
.container {
  position: relative;
  height: 100vh;
}

.scroll-view {
  height: calc(100vh - 100rpx);
}

.swiper {
  height: 420rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.base-info {
  padding: 30rpx;
  background-color: #fff;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.actions {
  display: flex;
}

.actions uni-icons {
  margin-left: 20rpx;
}

.info-stats {
  display: flex;
  justify-content: space-around;
  margin: 30rpx 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #f60;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.info-price {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20rpx;
}

.price {
  font-size: 48rpx;
  font-weight: bold;
  color: #f60;
  margin-right: 10rpx;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
}

.info-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  font-size: 22rpx;
  color: #f60;
  background-color: #fff0e6;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

.section {
  margin: 20rpx 0;
  padding: 30rpx;
  background-color: #fff;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.coach-scroll {
  white-space: nowrap;
  padding: 10rpx 0;
}

.coach-item {
  display: inline-block;
  width: 160rpx;
  margin-right: 20rpx;
  text-align: center;
}

.coach-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.coach-name {
  display: block;
  font-size: 26rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coach-rating {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-text {
  font-size: 22rpx;
  color: #f60;
  margin-left: 5rpx;
}

.package-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
}

.package-item {
  width: calc(100% - 20rpx);
  margin: 10rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  transition: all 0.3s;
}

.package-item.active {
  border-color: #f60;
  background-color: #fff0e6;
}

.package-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.package-price {
  display: block;
  font-size: 32rpx;
  color: #f60;
  margin-bottom: 10rpx;
}

.package-desc {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.review-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.review-header {
  display: flex;
  margin-bottom: 15rpx;
}

.review-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.review-user {
  flex: 1;
  margin-left: 15rpx;
}

.review-name {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-time {
  font-size: 22rpx;
  color: #999;
  margin-left: 10rpx;
}

.review-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.view-more {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  padding: 20rpx 0;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}

.footer-buttons {
  display: flex;
  flex: 1;
}

.button {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
}

.contact {
  background-color: #f5f5f5;
  color: #666;
}

.enroll {
  background: linear-gradient(135deg, #ff80ab 0%, #ff4081 100%);
  color: #fff;
}
</style>